<!-- 客户详情-客户联系人-新增联系人组件 -->
<template>
  <a-modal
    :mask-closable="false"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> {{ props.title }} </template>
    <div>
      <a-form
        auto-label-width
        :model="contactForm"
        ref="contactRef"
        :rules="rules"
        layout="vertical"
      >
        <a-table-column :width="50">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-form-item field="name" label="联系人姓名">
          <a-input v-model="contactForm.name" placeholder="请输入联系人姓名" />
        </a-form-item>
        <a-form-item field="phone" label="联系电话">
          <a-input v-model="contactForm.phone" placeholder="请输入联系电话" />
        </a-form-item>
        <a-form-item field="job" label="职务">
          <a-input v-model="contactForm.job" placeholder="请输入职务：" />
        </a-form-item>
        <a-form-item field="department" label="部门">
          <a-input v-model="contactForm.department" placeholder="请输入部门" />
        </a-form-item>
        <a-form-item field="address" label="办公地点">
          <a-input
            v-model="contactForm.officeLocation"
            placeholder="请输入办公地点："
          />
        </a-form-item>
        <a-form-item field="decision" label="决策作用">
          <a-input v-model="contactForm.decisionRole" placeholder="请输入" />
        </a-form-item>
        <a-form-item field="primaryContact" label="是否为首要联系人">
          <a-radio-group v-model="contactForm.isPrimaryContact">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item field="primaryContact" label="是否为决策关键人">
          <a-radio-group v-model="contactForm.isKeyDecisionMakers">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, Ref, watchEffect } from 'vue';
  import regex from '@/utils/regex';
  import { IClientAddContact } from '@/types/order';
  import { cloneDeep } from 'lodash';
  import { getToken } from '@/utils/auth';

  const props = withDefaults(
    defineProps<{
      title: string;
      visible: boolean; // 是否显示对话框
      detailInfo: IClientAddContact; // 传进来的id
    }>(),

    {
      visible: false,
    }
  );

  const emits = defineEmits(['update:visible', 'addContactEmit']);

  // let type =

  // 判断是否显示对话框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });

  // const submit = () =>{

  // }

  // 储存表单
  // const contactForm = reactive<IClientAddContact>({
  //   name: '',
  //   phone: '',
  //   job: '',
  //   department: '',
  //   address: '',
  //   decision: '',
  //   primaryContact: '0',
  //   primaryDecision: '0',
  //   avatar: '',
  // });

  // const contactForm: Ref<IClientAddContact> = computed(() => props.detailInfo);
  let contactForm: Ref<any> = ref(cloneDeep(props.detailInfo));

  watchEffect(() => {
    if (modalVisible.value) contactForm.value = cloneDeep(props.detailInfo);
  });

  // 校验手机
  const validatePhone = (val: any, callback: any) => {
    if (val === undefined) callback(new Error('请输入电话号码'));
    else if (!regex.phone.role.test(val)) callback('请输入正确的电话号码');
    return true;
  };

  // 表单rules
  const rules = reactive({
    name: [
      {
        required: true,
        message: '请输入联系人姓名',
      },
    ],
    phone: [
      {
        required: true,
        validator: validatePhone,
      },
    ],
  });

  let contactRef = ref(); // 储存弹出框的ref

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  // 确定
  const handleOk = async () => {
    await contactRef.value.validate((valid: any) => {
      if (valid === undefined) {
        if (contactForm.value.id)
          emits('addContactEmit', contactForm.value, 'edit');
        else emits('addContactEmit', contactForm.value, 'add');
        modalVisible.value = false;
      } else {
        modalVisible.value = true;
      }
    });
  };
</script>

<style scoped lang="less">
  .add-contact {
    padding: 10px 30px;
  }
</style>
